<template>
  <div class='content'>
    <div class="profile_page">
      <head-top  :go-back='goBack'  :head-title="profiletitle"></head-top>
    </div>
    <div class="formContain">
      <titlebar :title-left='titleLeft'></titlebar>
      <ul>
        <li class="flex">
          <span class="label"><i class="require">*</i>OA账号</span>
          <div>
            <van-field  v-model="oa" placeholder="请输入OA账号" type="text" :disabled="!show" input-align="right"/>
          </div>
        </li>

      </ul>

    </div>

    <div class="align_center foot-button" v-if="show">
      <van-button class="cancel-btn" type="primary" @click="$router.go(-1)">取消</van-button>
      <van-button class="primary-btn" type="primary" @click="saveData">提交</van-button>
    </div>
  </div>
</template>

<script>
  import headTop from '@/components/header/head'
  import titlebar from '@/components/titlebar3/titlebar3';
  import {queryOa,updateOa} from '@/service/getData';
  import {getStore,getDefault} from '@/assets/config/mUtils';
  import { Dialog,Toast } from 'vant';
  export default {
    data(){
      return{
        goBack:true,
        titleLeft:"设置OA账户",
        profiletitle:'设置OA账户',
        screenHeight:'',
        oa:'',
        show:true
      }
    },
    created(){
      this.queryData()
    },
    mounted(){
      this.screenHeight = document.documentElement.clientHeight

    },
    components:{
      headTop,
      titlebar
    },
    updated () {
      let that = this;
      this.$nextTick(function () {
        let $inputs = Array.from(document.getElementsByTagName('input'));
        /*let body = document.body;
        $inputs.forEach(item => { // 定时器是处理多个input间快速切换闪屏问题，可省略
            item.onblur = function () { // onblur是核心方法
                clearTimeout(body.timer);
                body.timer = setTimeout(() => {
                window.scroll(0, 0);
                window.innerHeight = window.outerHeight = that.screenHeight
                }, 150)
            }
            item.onfocus = function () {
                clearTimeout(body.timer)
            }
        })*/
        let body = document.body;
        $inputs.forEach(item => {
          item.onblur = function () { // onblur是核心方法
            window.scroll(0, 0);
            window.innerHeight = window.outerHeight = that.screenHeight;
            //console.log(that.screenHeight);
          }
        })
      })
    },
    methods:{
      queryData(){
        var data = {};
        data.app_userId = getStore('user_id');
        data.CHECK_TIME = new Date().getTime();
        data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
        queryOa(data).then(res=>{
          if(res.code == 200){
            if(res.data.oaLoginName){
              this.show = false
            }
            this.oa = res.data.oaLoginName
          }else if(res.code == 400){
            Dialog.alert({
              title: '提示',
              message: res.msg
            });
          }
        })
      },
      saveData(){
        if(this.oa ==''){
          Dialog.alert({
            title: '提示',
            message: '请设置OA账户'
          });
        }else {
          var data = {};
          data.app_userId = getStore('user_id');
          data.CHECK_TIME = new Date().getTime();
          data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
          data.oaLoginName = this.oa;
          updateOa(data).then(res=>{
            if(res.code == 200){
              Dialog.alert({
                title: '提示',
                message: 'OA账户设置成功'
              }).then(() => {
                this.$router.go(-1);
                /*this.$router.push({
                  path: '/userInfo',
                })*/
              });
            }else if(res.code == 400){
              Dialog.alert({
                title: '提示',
                message: res.msg
              });
            }
          })

        }

      },
    }
  }

</script>

<style lang="scss" scoped>
  @import '../../assets/style/mixin';
  @import '../../assets/style/public';
  .formContain{
    background: #fff;
    ul{
      padding: 0 .54rem;
      .flex{
        justify-content: space-between;
        align-items: center;
        line-height: 2rem;
        border-bottom: 1px solid #e0e0e0;
        padding: 0 .3rem;
        &:nth-last-of-type(1){
          border: none;
        }
        .label{
          font-size: .56rem;
          line-height: 2rem;
          color: #333333;
        }
        div{
          display: flex;
          justify-content: flex-end;
          align-items: center;
          position: relative;
          flex-grow: 1;
          img{
            width: .68rem;
            height: .64rem;
          }
          input{
            color: #323233;
            text-align: right;
            font-size: .48rem;
            padding-right: .48rem;
            border: none;
            &:-ms-input-placeholder{
              color: #aaa;
              font-size: .48rem;

            }
          }
          .file{
            width: 2rem;
            height: 1rem;
            font-size: 10rem;
            opacity: 0;
            position: absolute;
            right: 0;
          }
          .van-cell{
            font-size: .48rem;
            padding-right: .48rem;
            padding: 0;
            color: #aaa;
            .van-field__control{
              color: #aaa;
            }
          }

        }
      }
    }
  }
  .foot-button{
    margin-top: 2rem;
    margin-bottom: .4rem;
    .cancel-btn{
      margin-right: 1rem;
    }
  }
  #datetime-picker,#picker{
    position: fixed;
    width: 100%;
    bottom: 0;
  }
  .require{
    color: red;
    margin-right: 4px;
    font-style: inherit;
    font-size: 14px;
  }
</style>
